---
title: Astro 사이트를 Vercel에 배포
description: Vercel을 사용하여 Astro 사이트를 웹에 배포하는 방법.
sidebar:
  label: Vercel
type: deploy
logo: vercel
supports: ['ssr', 'static']
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';

[Vercel](http://vercel.com/)을 사용하면 구성 없이 Astro 사이트를 전세계 에지 네트워크에 배포할 수 있습니다.

이 가이드에는 웹사이트 UI 또는 Vercel의 CLI를 통해 Vercel에 배포하는 방법이 포함되어 있습니다.

## 프로젝트 구성

Astro 프로젝트는 정적 사이트 또는 서버에서 렌더링되는 사이트로 Vercel에 배포될 수 있습니다.

### 정적 사이트

Astro 프로젝트는 기본적으로 정적 사이트입니다. 정적 Astro 사이트를 Vercel에 배포하기 위한 추가 구성이 필요하지 않습니다.

### 요청 시 렌더링을 위한 어댑터

Astro 프로젝트에서 [요청 시 렌더링](/ko/guides/on-demand-rendering/)을 활성화하기 위해 다음 `astro add` 명령을 사용하여 [Vercel 어댑터](/ko/guides/integrations-guide/vercel/)를 추가하세요. 그러면 어댑터가 설치되고 `astro.config.mjs` 파일에 한번에 적절히 변경됩니다.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add vercel
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add vercel
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add vercel
  ```
  </Fragment>
</PackageManagerTabs>

<ReadMore>수동으로 설치하거나 Vercel Edge Functions를 사용하여 프로젝트의 Astro 미들웨어를 배포하는 것과 같은 더 많은 구성 옵션을 보려면 [Vercel 어댑터 가이드](/ko/guides/integrations-guide/vercel/)를 참조하세요.</ReadMore>

## 배포 방법

웹사이트 UI 또는 Vercel의 CLI (명령 줄 인터페이스)를 통해 Vercel에 배포할 수 있습니다. 정적 및 요청 시 렌더링되는 Astro 사이트 모두 동일한 과정을 거칩니다.

### 웹사이트 UI 배포

<Steps>
1. 코드를 온라인 Git 저장소 (GitHub, GitLab, BitBucket)에 푸시합니다.

2. Vercel로 [프로젝트를 가져옵니다](https://vercel.com/new).

3. Vercel은 자동으로 Astro를 감지하고 적절한 설정을 구성합니다.

4. 애플리케이션이 배포되었습니다! (예: [astro.vercel.app](https://astro.vercel.app/))
</Steps>

프로젝트를 가져와 배포된 후, 브랜치의 모든 후속 푸시는 [배포 미리보기](https://vercel.com/docs/concepts/deployments/preview-deployments)를 생성하고, 프로덕선 브랜치 (일반적으로 "main")에 대한 모든 변경 사항은 [프로덕션 배포](https://vercel.com/docs/concepts/deployments/environments#production)에 반영됩니다.

<ReadMore>Vercel의 [Git 통합](https://vercel.com/docs/concepts/git)에 대해 더 알아보세요.</ReadMore>


### CLI 배포

<Steps>
1. [Vercel CLI](https://vercel.com/cli)를 설치하고 `vercel`을 실행하여 배포합니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install -g vercel
      vercel
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add -g vercel
      vercel
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn global add vercel
      vercel
      ```
      </Fragment>
    </PackageManagerTabs>

2. Vercel은 자동으로 Astro를 감지하고 적절한 설정을 구성합니다.

3. `Want to override the settings? [y/N]`라는 질문에 대한 답변으로 `N`을 선택합니다.

4. 애플리케이션이 배포되었습니다! (예: [astro.vercel.app](https://astro.vercel.app/))
</Steps>

### `vercel.json`을 이용한 프로젝트 구성

`vercel.json`을 사용하여 Vercel의 기본 동작을 재정의하고 추가 설정을 구성할 수 있습니다. 예를 들어, 배포의 HTTP 응답에 헤더를 첨부하려는 경우가 있을 수 있습니다.

<ReadMore>[Vercel의 프로젝트 설정](https://vercel.com/docs/project-configuration)에 대해 더 알아보세요.</ReadMore>
